<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="1.5">
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-search"
            v-model="searchName"
            @keyup.enter.native="handleSearch"
            >
          </el-input>
        </el-col>
        
        <el-col :span="1.5" >
          <el-button
              type="primary"
              size="mini"
              @click="add()"
            >新增</el-button>
        </el-col>
        <el-col :span="1.5" >
          <el-button
              type="danger"
              size="mini"
            >删除</el-button>
        </el-col>
      </el-row>
    </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="用户id" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.userId }}
          </template>
        </el-table-column>
        <el-table-column label="用户名">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column label="身份" width="110" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.role.roleName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="学系" width="110" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.dept.deptName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="专业" width="200" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.major.majorName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row.userId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    
      <el-dialog 
            center
            :title="title"
            :visible.sync= "formVisible"
            width= "30%"
      >
        <el-form :model="form" ref= "formRef" label-width= "90px">
           <el-form-item label= "用户ID" prop = "userId">
              <el-input v-model="form.userId"></el-input>
          </el-form-item>

          <el-form-item label="用户名" prop ="username">
              <el-input v-model="form.username"></el-input>
          </el-form-item>

          <el-form-item label="角色" prop ="roleId">
            <el-select v-model="form.roleId" placeholder="请选择">
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId">
              </el-option>
            </el-select>
          </el-form-item>

        <el-form-item label="系别-专业" prop ="deptAndmajorId">
          <el-cascader 
            
            v-model="form.deptAndmajorId"
            @change="handleChange"
            :options="deptMajorOptions" 
            :props="{value:'value', label: 'name', children: 'majorList'}"
            filterable
            clearable
          ></el-cascader>
        </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="formVisible = false">取 消</el-button>
            <el-button @click="submitForm" type="primary">确 定</el-button>
        </span>
      </el-dialog>

    <el-pagination @size-change= "handleSizeChange" @current-change= "handleCurrentChange" :current-page= "PageSet.pageNum"
        :page-sizes="[5, 30, 50, 100]" :page-size="PageSet.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="PageSet.total">
    </el-pagination>
  </div>
</template>

<script>
import { getList, addUser, updateUser, deleteUser, getListByName} from '@/api/userManage/user'
import { getRole, getDept, getMajor,getdeptMajor} from '@/api/component/'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      searchName: '',
      title: '',
      PageSet: {
        pageNum: 1, // 当前页码
        pageSize: 5, // 每页显示的行数
        total: 100
      },
      formVisible: false,
      form: {
        userId: '',
        username: '',
        roleId:'',
        deptId: '',
        majorId: '',
        deptAndmajorId:[],
        status:'',
      },
      roleOptions: null,
      deptOptions: null,
      majorOptions: null,
      deptMajorOptions:null,
    }
  },
  created() {
    getRole().then(response => {
      this.roleOptions = response.data.items;
    })
    getDept().then(response => {
      this.deptOptions = response.data.items;
    })
    getMajor().then(response => {
      this.majorOptions = response.data.items;
    })
    getdeptMajor().then(response => {
      this.deptMajorOptions = response.data.items;
    })
    this.fetchData()
  },
  methods: {
    handleSizeChange: function(size) {
      this.PageSet.pageSize = size
      this.fetchData()
    },
    handleCurrentChange: function(pageNum) {
      this.PageSet.pageNum = pageNum
      this.fetchData()
    },
    handleSearch() {
      getListByName(this.PageSet, this.searchName).then(response => {
        this.PageSet.total = response.data.items.total
        this.list = response.data.items.list
        this.listLoading = false
      })
    },
    resetForm() {
      this.form = {
        userId: '',
        username: '',
        roleId: '',
        deptAndmajorId: [],
        status: '',
      }
    },
    fetchData() {
      this.listLoading = true
      getList(this.PageSet).then(response => {
        this.PageSet.total = response.data.items.total
        this.list = response.data.items.list
        this.listLoading = false
      })
    },
    edit(row) {
      this.resetForm()
      this.title = '修改用户'
      this.form.status = 1
      this.formVisible = true
      this.form = Object.assign(this.form, row)
      this.form.roleId = this.form.role.roleId;
      this.form.deptId = this.form.dept.deptId;
      this.form.majorId = this.form.major.majorId;
      this.form.deptAndmajorId = [this.form.dept.deptId,this.form.major.majorId]
      
    },
    add() {
      this.resetForm()
      this.title = '增加用户'
      this.form.status = 0
      this.formVisible = true
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该用户,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(function() {
          return deleteUser(id);
          }).then(() => {
          this.fetchData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        
    }, handleChange(itemIdArr){
      this.form.deptId = itemIdArr[itemIdArr.length-2]
      this.form.majorId = itemIdArr[itemIdArr.length-1]
    },
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          if (this.form.status == 0) {
            addUser(this.form).then(() => {
              this.formVisible = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.fetchData()
            })
          }
        else if (this.form.status == 1) {
            updateUser(this.form).then(() => {
              this.formVisible = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.fetchData()
            })
        }
      }
    })
  },

  }
}
</script>
